<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>debug9</title>
		<style>
			body
			{
				background-color: black;
				margin: 0;
			}
			#bg
			{
				height: 1080px;
				width: 1920px;
				background-image: url("db9bg.png");
			}
			#d1
			{
				position: absolute;
				display: block;
				top: 6px;
				width: 100%;
				text-align: center;
				margin: auto;
				background-color: transparent;
			}
			#time
			{
				display: inline-flex;
				text-align: center;
				margin-left: auto;
				background-color: transparent;
			}
			#date
			{
				display: inline-flex;
				text-align: center;
				margin-left: auto;
				margin-top: 6px;
				background-color: transparent;
			}
			#time .num
			{
				margin-right: 60px;
				height: 200px;
				width: 120px;
			}
			.incom
			{
				margin-top: auto;
				color: royalblue;
				font-size: 120px;
				font-weight: 900;
			}
			#time .num .heng0
			{
				position: relative;
				left: 20px;
				width: 80px;
				height: 10px;
				border-radius: 5px;
				background-color: transparent;
			}
			#time .num .heng1
			{
				top: 10px;
			}
			#time .num .heng2
			{
				top: 85px;
			}
			#time .num .heng3
			{
				top: 160px;
			}
			#time .num .shu0
			{
				position: relative;
				padding-top: 0px;
				padding-bottom: 0px;
				height: 70px;
				width: 10px;
				border-radius: 5px;
				background-color: transparent;
			}
			#time .num .shu1
			{
				top: -10px;
				left: 10px;
			}
			#time .num .shu2
			{
				top: -80px;
				left: 100px;
			}
			#time .num .shu3
			{
				top: -60px;
				left: 10px;
			}
			#time .num .shu4
			{
				top: -130px;
				left: 100px;
			}
			.cb
			{
				display: none;
			}
			.heng-in
			{
				position: relative;
				left: 35px;
				height: 10px;
				width: 10px;
				border-radius: 5px;
				background-color: transparent;
				transition: .5s;
			}
			.cbh1:checked+div
			{
				background-color: royalblue;
				left: 0;
				width: 80px;
			}
			.shu-in
			{
				position: relative;
				top: 30px;
				height: 10px;
				width: 10px;
				border-radius: 5px;
				background-color: transparent;
				transition: .5s;
			}
			.cbs1:checked+div
			{
				background-color: royalblue;
				top: 0;
				height: 70px;
			}
		</style>
	</head>
	<body>
		<div id="bg">
			<div id="d0">
				<div id="d1">
					<div id="time">
						<div class="num" id="hour1">
							<div class="heng0 heng1">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng2">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng3">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="shu0 shu1">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu2">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu3">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu4">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
						</div>
						<div class="num" id="hour2">
							<div class="heng0 heng1">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng2">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng3">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="shu0 shu1">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu2">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu3">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu4">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
						</div>
						<div class="incom">:</div>
						<div class="num" id="min1">
							<div class="heng0 heng1">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng2">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng3">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="shu0 shu1">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu2">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu3">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu4">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
						</div>
						<div class="num" id="min2">
							<div class="heng0 heng1">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng2">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng3">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="shu0 shu1">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu2">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu3">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu4">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
						</div>
						<div class="incom">:</div>
						<div class="num" id="sec1">
							<div class="heng0 heng1">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng2">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng3">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="shu0 shu1">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu2">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu3">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu4">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
						</div>
						<div class="num" id="sec2">
							<div class="heng0 heng1">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng2">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="heng0 heng3">
								<input type="checkbox" class="cb cbh1">
								<div class="heng-in"></div>
							</div>
							<div class="shu0 shu1">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu2">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu3">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
							<div class="shu0 shu4">
								<input type="checkbox" class="cb cbs1">
								<div class="shu-in"></div>
							</div>
						</div>
					</div><br>
				</div>
			</div>
		</div>
		<script>
				var udlist=['hour1','hour2','min1','min2','sec1','sec2'];
				var numlist=['heng1','heng2','heng3','shu1','shu2','shu3','shu4'];
				var disnum={
					n0:[1,0,1,1,1,1,1],
					n1:[0,0,0,0,1,0,1],
					n2:[1,1,1,0,1,1,0],
					n3:[1,1,1,0,1,0,1],
					n4:[0,1,0,1,1,0,1],
					n5:[1,1,1,1,0,0,1],
					n6:[1,1,1,1,0,1,1],
					n7:[1,0,0,0,1,0,1],
					n8:[1,1,1,1,1,1,1],
					n9:[1,1,1,1,1,0,1]
				};

			function updateW()
			{
				var disarr=new Array();
				var hou=new Date().getHours();
				var min=new Date().getMinutes();
				var sec=new Date().getSeconds();
				disarr[0]=parseInt(hou/10);
				disarr[1]=hou%10;
				disarr[2]=parseInt(min/10);
				disarr[3]=min%10;
				disarr[4]=parseInt(sec/10);
				disarr[5]=sec%10;
				//console.log(disarr);
				for(var num1=0;num1<udlist.length;num1++)
				{
					var ele = document.getElementById(udlist[num1]);
					for(num2=0;num2<7;num2++)
					{
						var nf=new Array();
						switch(disarr[num1])
						{
							case 0:
								nf=disnum.n0;
								break;
							case 1:
								nf=disnum.n1;
								break;
							case 2:
								nf=disnum.n2;
								break;
							case 3:
								nf=disnum.n3;
								break;
							case 4:
								nf=disnum.n4;
								break;
							case 5:
								nf=disnum.n5;
								break;
							case 6:
								nf=disnum.n6;
								break;
							case 7:
								nf=disnum.n7;
								break;
							case 8:
								nf=disnum.n8;
								break;
							case 9:
								nf=disnum.n9;
								break;
							default:
								break;
						}
						//nf=disnum[disarr[num1]]
						//console.log(nf);
						ele.getElementsByClassName(numlist[num2])[0].childNodes[1].checked=nf[num2];
						//console.log(ele.getElementsByClassName(numlist[num2])[0].childNodes[1].checked);
						
						//ele.getElementsByClassName(numlist[num2])[0].getElementsByTagName('input')[0].checked=1;
						//document.getElementsByClassName('cbh1').checked=1;
					}
				}
				//console.log('run');
				//setInterval(updateW(),1000);
			}
			setInterval(updateW,1000);
			//setTimeout(updateW)
			//updateW();
		</script>
	</body>
</html>